<sb-layout-dashboard class="types-component">
    <sb-dashboard-head title="Files" [hideBreadcrumbs]="false"></sb-dashboard-head>
    <sb-card background="h-100 type-tabs">
        <div class="card-header pb-0">

            <div *ngIf="expanded" class="d-flex flex-row flex-grow w-100">
                <div class="ml-auto">
                    <ng-select [items]="typesColumnDefs"
                        [(ngModel)]="selectedCols"
                        [ngModelOptions]="{standalone: true}"
                        placeholder="Columns"
                        appendTo="body"
                        bindLabel="colId"
                        [searchable]="false"
                        [multiple]="true"
                        [closeOnSelect]="false"
                        (change)="setVisibleCols($event)"
                    >
                        <ng-template ng-multi-label-tmp>
                            <div class="ng-value">
                                <span class="ng-value-label">{{selectedCols.length - 2}} selected...</span>
                            </div>
                        </ng-template>
                    </ng-select>
                </div>
            </div>

            <div style="display: flex; align-items: center; padding-bottom: 0; padding-top: 0.5rem;">
                <div class="ml-3 mr-3" title="More options"
                    style="cursor: pointer;"
                    (click)="expanded = !expanded"
                >
                    <fa-icon class="mr-1" [icon]='["fas", expanded ? "chevron-up" : "chevron-right"]'></fa-icon>
                </div>

                <div class="ml-3 mr-3" title="Un/Lock the width of the table columns">
                    <fa-icon class="mr-1" [icon]='["fas", lockedWidth ? "lock" : "lock-open"]'></fa-icon>
                    <input type="checkbox" [(ngModel)]="lockedWidth">
                </div>

                <ul class="nav-tabs mt-auto" [(activeId)]="activeTab" ngbNav #nav="ngbNav">
                    <li [ngbNavItem]="0">
                        <a ngbNavLink>Types</a>
                        <ng-template ngbNavContent>
                            <div style="height: 100%; margin-bottom: 20px;">
                                <ag-grid-angular
                                    *ngIf="typesColumnDefs?.length"
                                    [columnDefs]="typesColumnDefs"
                                    [defaultColDef]="defaultColDef"
                                    [rowData]="combinedClasses"
                                    [getRowStyle]="getRowStyle"
                                    [floatingFiltersHeight]="50"
                                    [groupHeaderHeight]="75"
                                    [rowSelection]="'multiple'"
                                    (columnVisible)="saveGridState()"
                                    (columnResized)="saveGridState()"
                                    (columnMoved)="saveGridState()"
                                    (sortChanged)="saveGridState()"
                                    (rowDataUpdated)="filterChanged()"
                                    (firstDataRendered)="firstDataRendered()"
                                    (filterChanged)="filterChanged()"
                                    style="width: 100%; height: 100%;"
                                    class="ag-theme-alpine"
                                    #dataGrid
                                >
                                </ag-grid-angular>

                            </div>
                        </ng-template>
                    </li>

                    <li [ngbNavItem]="1">
                        <a ngbNavLink>Missing Types</a>
                        <ng-template ngbNavContent>
                            <div style="height: 100%">
                                <div>
                                    <span>Missing Types</span>
                                    <ul>
                                        <li *ngFor="let classname of missingClasses">
                                            {{ classname }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </ng-template>
                    </li>
                    <li [ngbNavItem]="2" *ngIf="missingTraderItems && missingTraderItems.length">
                        <a ngbNavLink>Missing Trader Items</a>
                        <ng-template ngbNavContent>
                            <div style="height: 100%">
                                <div >
                                    <span></span>
                                    <ul>
                                        <li *ngFor="let classname of missingTraderItems">
                                            {{ classname }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </ng-template>
                    </li>
                    <li [ngbNavItem]="3" *ngIf="unknownTraderItems && unknownTraderItems.length">
                        <a ngbNavLink>Unknown Trader Items</a>
                        <ng-template ngbNavContent>
                            <div style="height: 100%">
                                <div >
                                    <span></span>
                                    <ul>
                                        <li *ngFor="let classname of unknownTraderItems">
                                            {{ classname }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </ng-template>
                    </li>
                    <li [ngbNavItem]="4" *ngIf="unknownClasses && unknownClasses.length">
                        <a ngbNavLink>Unknown Items</a>
                        <ng-template ngbNavContent>
                            <div style="height: 100%">
                                <div >
                                    <span></span>
                                    <ul>
                                        <li *ngFor="let classname of unknownClasses">
                                            {{ classname }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </ng-template>
                    </li>
                    <li [ngbNavItem]="5" *ngIf="traderOnlyItems && traderOnlyItems.length">
                        <a ngbNavLink>Trader Only Items</a>
                        <ng-template ngbNavContent>
                            <div style="height: 100%">
                                <div >
                                    <span></span>
                                    <ul>
                                        <li *ngFor="let classname of traderOnlyItems">
                                            {{ classname }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </ng-template>
                    </li>
                </ul>

                <div class="d-flex ml-auto" style="align-items: center;">
                    <fa-icon class="mr-2" [icon]='["fas", "info"]'></fa-icon>
                    <div style="font-weight: 400; font-size: 65%;">
                        <div class="mr-2">Shown: {{ shownTypesCount }}</div>
                        <div>Total Nominal: {{ totalNominal }}</div>
                        <div>Estimated Nominal: {{ totalEstimatedNominal }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body" *ngIf="!loading">
            <div class="d-flex flex-row justify-content-between">
                <ngb-alert  *ngIf="outcomeBadge"
                            [type]="outcomeBadge.success ? 'success' : 'danger'"
                            (closed)="outcomeBadge = undefined"
                >
                    {{ outcomeBadge.message }}
                </ngb-alert>
                <ngb-alert  *ngIf="validationErrors?.length"
                            type="danger"
                            (closed)="validationErrors = []"
                >
                    <div>
                        Errors:
                        <ul style="max-height: 10vh; overflow-y: scroll;">
                            <li *ngFor="let error of validationErrors">
                                {{ error }}
                            </li>
                        </ul>
                    </div>
                </ngb-alert>
            </div>
            <form (ngSubmit)="onSubmit()" #configForm="ngForm">

                <div [ngbNavOutlet]="nav"></div>

                <div class="d-flex flex-row" style="justify-content: space-between; flex-wrap: wrap; white-space: nowrap;">
                    <div class="d-flex flex-row">
                        <div>
                            <button type="button" class="btn btn-success"
                                    (click)="duplicate()"
                                    title="Duplicate the selected entries"
                            >
                                Duplicate
                            </button>
                        </div>
                        <div class="d-flex flex-row btn-group ml-1 mr-1">
                            <input #changeInput style="margin-right: -2px;">
                            <select [(ngModel)]="selectedOpertaionCol"
                                    (ngModelChange)="selectedOpertaion = undefined"
                                    [ngModelOptions]="{standalone: true}"
                            >
                                <option [disabled]="true" [ngValue]="undefined" *ngIf="selectedOpertaionCol === undefined">Select...</option>
                                <option [disabled]="true" [ngValue]="null" *ngIf="selectedOpertaionCol === null">Select...</option>
                                <option *ngFor="let item of typesColumnDefs || []; let idx = index"
                                        [ngValue]="item"
                                        [selected]="idx === 0"
                                >
                                    {{ item.colId }}
                                </option>
                            </select>
                            <select [disabled]="!selectedOpertaionCol"
                                    [(ngModel)]="selectedOpertaion"
                                    [ngModelOptions]="{standalone: true}"
                            >
                                <option [disabled]="true" [ngValue]="undefined" *ngIf="selectedOpertaion === undefined">Select...</option>
                                <option [disabled]="true" [ngValue]="null" *ngIf="selectedOpertaion === null">Select...</option>

                                <option *ngFor="let item of selectedOpertaionCol?.operations || []; let idx = index"
                                        [ngValue]="item"
                                        [selected]="idx === 0"
                                        [title]="item.title || ''"
                                >
                                    {{ item.label || '' }}
                                </option>
                                <!-- <option value="multiply" selected title="Multiply by factor">Multiply</option>
                                <option value="multiply-percent" title="Multiply by percent">Multiply %</option>
                                <option value="set" title="Set to a fixed value">Set</option>
                                <option value="add" title="Add a fixed value or add it to the list">Add</option>
                                <option value="remove" title="Remove a fixed value or remove it from the list">Remove</option> -->
                            </select>
                            <button type="button" class="btn btn-success"
                                    [disabled]="!selectedOpertaionCol || !selectedOpertaion"
                                    (click)="changeAttr(changeInput.value)"
                                    title="Execute the operation"
                            >
                                Exec
                            </button>
                        </div>
                    </div>
                    <div class="d-flex flex-row">
                        <button type="button" class="btn btn-success ml-1 mr-1"
                                (click)="validate(true)"
                        >
                            Validate
                        </button>
                        <button type="button" class="btn btn-success ml-1 mr-1"
                                (click)="csvExport()"
                        >
                            CSV Export
                        </button>
                        <button type="button" class="btn btn-success ml-1 mr-1"
                                [disabled]="!configForm.form.valid"
                                (click)="downloadFiles()"
                        >
                            Download
                        </button>
                    </div>
                    <div class="d-flex flex-row">
                        <div class="d-flex flex-row ml-1 mr-1" style="align-items: center;">
                            <label class="form-label" style="white-space: nowrap;">Create Backup</label>
                            <input type="checkbox" class="form-control form-control-sm mx-1"
                                   [(ngModel)]="withBackup"
                                   [ngModelOptions]="{standalone: true}"
                                   [disabled]="submitting"
                            >
                        </div>
                        <div class="d-flex flex-row ml-1 mr-1" style="align-items: center;">
                            <label class="form-label" style="white-space: nowrap;">Restart Server</label>
                            <input type="checkbox" class="form-control form-control-sm mx-1"
                                   [(ngModel)]="withRestart"
                                   [ngModelOptions]="{standalone: true}"
                                   [disabled]="submitting"
                            >
                        </div>
                        <button type="submit" class="btn btn-success ml-1 mr-1"
                                [disabled]="!configForm.form.valid || submitting"
                        >
                            <fa-icon *ngIf="submitting" [icon]='["fas", "spinner"]' [classes]="['fa-spin']"></fa-icon>
                            Submit
                        </button>
                        <button type="button" class="btn btn-primary ml-1 mr-1"
                                (click)="resetClicked()"
                                [disabled]="submitting"
                        >
                            Reset
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-body" *ngIf="loading">
            <fa-icon [icon]='["fas", "spinner"]' [classes]="['fa-spin']"></fa-icon>
        </div>
    </sb-card>
</sb-layout-dashboard>
